<template>
  <el-container class="layout">
    <Maximize v-show="maximize" />
    <el-aside>
      <div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
        <div class="logo flx-center">
          <img class="logo-img" src="@/assets/vue.svg" alt="logo" />
          <span v-show="!isCollapse" class="logo-text">{{ title }}</span>
        </div>
        <el-scrollbar>
          <el-menu :router="false" :default-active="activeMenu" :collapse="isCollapse" :unique-opened="accordion" :collapse-transition="false">
            <sub-menu v-for="subItem in menuList" :key="subItem.path" :menu="subItem" />
          </el-menu>
        </el-scrollbar>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <ToolBarLeft />
        <ToolBarRight />
      </el-header>
      <Tabs v-show="tabs" />
      <Main />
      <Footer v-show="footer" />
    </el-container>
    <theme-drawer />
  </el-container>
</template>
<script setup>
import {storeToRefs} from "pinia";
import { useAppStore } from "@/stores/modules/desktop";
import { useAuthStore } from "@/stores/modules/auth";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Main from '@/layouts/components/Main/Index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import Footer from "@/layouts/components/Footer/index.vue";
import Maximize from "@/layouts/components/Maximize.vue";
import ThemeDrawer from '@/layouts/components/ThemeDrawer/index.vue'

const appStore = useAppStore();
const authStore = useAuthStore();
const { maximize,tabs, footer} = storeToRefs(appStore);
const route = useRoute();
const accordion = computed(() => appStore.accordion);
const isCollapse = computed(() => appStore.isCollapse);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path));

useDark();// 暗黑模式
// 监听当前页面是否最大化，动态添加 class
watch(
  () => maximize.value,
  () => {
    const app = document.getElementById("app");
    if (maximize.value) app.classList.add("main-maximize");
    else app.classList.remove("main-maximize");
  },
  { immediate: true }
);
const menuList = computed(() => authStore.showMenuListGet);
const title = import.meta.env.VITE_GLOB_APP_TITLE;

// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref(0);
const listeningWindow = useDebounceFn(() => {
  screenWidth.value = document.body.clientWidth;
  if (!isCollapse.value && screenWidth.value < 1200) appStore.setAppState("isCollapse", true);
  if (isCollapse.value && screenWidth.value > 1200) appStore.setAppState("isCollapse", false);
}, 100);
window.addEventListener("resize", listeningWindow, false);
onBeforeUnmount(() => {
  window.removeEventListener("resize", listeningWindow);
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
